import React from 'react';
import {Layout, Menu} from 'antd';
import {MenuUnfoldOutlined, MenuFoldOutlined, AppstoreOutlined} from '@ant-design/icons';
import * as Icon from '@ant-design/icons';
import './index.css';
import {withRouter} from "react-router";
import menuConfig from './menu.config';

const {Header, Sider, Content, Footer} = Layout;
const {SubMenu} = Menu;
const menuData = menuConfig;

@withRouter
class SiderComponent extends React.Component {
    state = {
        collapsed: false,
        selectedKeys: ['5'],
        openKeys: ['sub2'],
        menuList: []
    };
    componentWillMount() {
        const menuList = this.renderMenu(menuData);
        this.setState({
            menuList: menuList,
        })
    };
    renderMenu = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <SubMenu key={item.key}
                             title={item.title}
                             icon={
                                 React.createElement(
                                     Icon[item.icon], {
                                         style: {}
                                     }
                                 )
                             }
                             onTitleClick={e => this.chooseSubMenu([e.key])}>

                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            } else {
                return (
                    <Menu.Item key={item.key}
                               title={item.title}
                               onClick={this.chooseMenu.bind(this, [item.parentKey], [item.key], item.url)}>
                        {item.title}
                    </Menu.Item>
                )
            }
        })
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    chooseMenu = (openKeys, selectedKeys, name, e) => {
        this.props.history.push(name);
        this.setState({
            selectedKeys: selectedKeys,
            openKeys: openKeys,
        });
    };
    chooseSubMenu = (openKeys) => {
        this.setState({
            openKeys: openKeys,
        });
    };
    handleOpenChange = (e) => {
        if (e.length===0){
            this.setState({
                openKeys: e,
            });
        }
    };
    render() {
        return (
            <Layout style={{
                height: '100vh'
            }}>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo"/>
                    <Menu
                        openKeys={this.state.openKeys}
                        selectedKeys={this.state.selectedKeys}
                        mode="inline"
                        theme="dark"
                        onOpenChange={this.handleOpenChange}

                    >
                        {this.state.menuList}
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{padding: 0}}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}

                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '12px 10px',
                            padding: 12,
                            minHeight: 280,
                        }}
                    >
                        {this.props.children}

                    </Content>
                    <Footer style={{textAlign: 'center', minHeight: 35}}>
                        后台系统© 2018 Created by 上海浦壹电子
                    </Footer>
                </Layout>
            </Layout>
        );
    }
}
export default SiderComponent